﻿<template>
  <baseConfigUI :config.sync="config" :events.sync="events">
    <template v-if="config.other.dataSource">
      <el-form-item label = "是否多选">
        <el-switch
          v-model="config.other.isMulti">
        </el-switch>
      </el-form-item>
      <el-form-item label = "分隔符">
        <el-input
          v-model="config.other.separator">
        </el-input>
      </el-form-item>
      <el-form-item label = "级联类型">
        <el-radio-group v-model="config.other.cadecaseCategory">
          <el-radio-button label="ms">主从表</el-radio-button>
          <el-radio-button label="tree">树表</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label = "是否过滤逻辑删除资料">
        <el-switch
          v-model="config.other.isFilterDeleted">
        </el-switch>
      </el-form-item>
      <el-form-item label = "数据来源方式">
        <el-radio-group v-model="config.other.dataSource.category">
          <el-radio-button label="static">静态</el-radio-button>
          <el-radio-button label="remote">动态</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="config.other.dataSource.category === 'static'">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addColumns()">添加</el-button>
        </div>
        <div>
          <el-table
            :data="config.other.dataSource.StaticSettings.data"
            style="width: 100%;margin-bottom: 20px;"
            row-key="uid"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="code"
              label="code"
              sortable
              align = "center"
              width="180" style="display:flex">
              <template slot-scope = "scope">
                <el-input v-model="scope.row.code" style="width:80%;float:right;"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="text"
              label="text"
              sortable
              align = "center">
              <template slot-scope = "scope">
                <el-input v-model="scope.row.text"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="disabled"
              label="是否禁用"
              sortable
              align = "center">
              <template slot-scope = "scope">
                <el-switch
                  v-model="scope.row.disabled">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align = "center">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleAddChildren(scope.row)" title = '添加'>
                  <i class = "iconfont icon-add"></i>
                </el-button>
                <el-button type = "text" size = "mini" @click = "handleRemove(scope.row, scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-if="config.other.dataSource.category === 'remote'">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane name="dataSource" label="数据源设定">
            <el-select v-model="config.other.dataSource.MetaPopSettings.table" filterable  placeholder="请选择" @change="changePopMeta">
              <el-option
                v-for="(item,index) in metatables"
                :key="index"
                :label="item.metadesc"
                :value="item.metauid">
                <span style="float: left">{{ item.metadesc }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
              </el-option>
            </el-select>
            <el-divider></el-divider>
            <el-form-item label = "含引用值栏位">
              <el-select v-model="config.other.dataSource.MetaPopSettings.column" filterable  placeholder="请选择">
                <el-option
                  v-for="(item,index) in metaColumns"
                  :key="index"
                  :label="item.column_desc"
                  :value="item.column_name">
                  <span style="float: left">{{ item.column_desc }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label = "排序设定">
              <el-button style="float: right; padding: 3px 0" type="text" @click="addPopOrderBy">添加</el-button>
                <div>
                  <el-table :data = 'config.other.dataSource.MetaPopSettings.orderList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'text' label = '栏位'>
                      <template slot-scope = "scope">
                        <el-select v-model="scope.row.column" clearable placeholder="请选择">
                          <el-option
                            v-for="(item,index) in metaColumns"
                            :key="index"
                            :label="item.column_desc"
                            :value="item.column_name">
                            <span style="float: left">{{ item.column_desc }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'sort' label = '排序'>
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.direction" clearable placeholder="请选择">
                          <el-option
                            v-for="(item,index) in orderOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handlePopOrderRemove(scope.$index)" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane name="startSettings" label="起始层设定" v-if="config.other.dataSource.MetaPopSettings.startLevel">
            <el-select v-model="config.other.dataSource.MetaPopSettings.startLevel.table" filterable  placeholder="请选择" @change="changeStartMeta">
              <el-option
                v-for="(item,index) in metatables"
                :key="index"
                :label="item.metadesc"
                :value="item.metaname">
                <span style="float: left">{{ item.metadesc }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.metaname }}</span>
              </el-option>
            </el-select>
            <el-form-item label = "栏位名称">
              <el-select v-model="config.other.dataSource.MetaPopSettings.startLevel.column" filterable  placeholder="请选择">
                <el-option
                  v-for="(item,index) in startColumns"
                  :key="index"
                  :label="item.column_desc"
                  :value="item.column_name">
                  <span style="float: left">{{ item.column_desc }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.column_name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label = "栏位值(过滤使用,多个用逗号分隔)">
              <el-input v-model="config.other.dataSource.MetaPopSettings.startLevel.filterValue" placeholder="请输入过滤值，多个用逗号分隔"></el-input>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
    </template>
    </template>
  </baseConfigUI>
</template>
<script>
import baseConfigUI from '../baseConfigUI.vue'
export default {
  components: {baseConfigUI},
  props: ['config', 'events'],
  data () {
    return {
      metatables: [],
      metaColumns: [],
      startColumns: [],
      activeName: 'dataSource'
    }
  },
  mounted () {
    if (!this.config.other.dataSource) {
      this.$set(this.config.other, 'dataSource', {
        category: 'remote',
        MetaPopSettings: {
          table: '',
          orderList: [],
          column: '',
          startLevel: {
            table: '',
            column: '',
            filterValue: ''
          }
        },
        StaticSettings: {
          data: []
        }
      })
    }
    if (!this.config.other.dataSource.StaticSettings) {
      this.$set(this.config.other.dataSource, 'StaticSettings', {
        data: []
      })
    }
    if (!this.config.other.dataSource.MetaPopSettings) {
      this.$set(this.config.other.dataSource, 'MetaPopSettings', {
        table: '',
        orderList: [],
        column: '',
        startLevel: {
          table: '',
          column: '',
          filterValue: ''
        }
      })
    }
    if (!this.config.other.dataSource.MetaPopSettings.startLevel) {
      this.$set(this.config.other.dataSource.MetaPopSettings, 'startLevel', {
        table: '',
        column: '',
        filterValue: ''
      })
    }
    if (!this.metatables || this.metatables.length <= 0) {
      this.metatables = this.$store.state.commonData.metaList_inc_fc
      this.$nextTick(() => {
        this.changePopMeta()
        this.changeStartMeta()
      })
    }
    if (Object.keys(this.config.other).indexOf('isFilterDeleted') < 0) {
      this.config.other.isFilterDeleted = true
    }
    if (!this.config.other.cadecaseCategory) {
      this.$set(this.config.other, 'cadecaseCategory', 'ms')
    }
    if (!this.config.other.separator) {
      this.$set(this.config.other, 'separator', '/')
    }
  },
  methods: {
    changePopMeta () {
      this.metaColumns = []
      let self = this
      var item = this.metatables.find(v => {
        return v.metauid === self.config.other.dataSource.MetaPopSettings.table
      })
      if (item) {
        this.metaColumns = item.columns.filter(col => {
          return col.ui_type.indexOf('CascadeSelect') >= 0
        })
      }
    },
    changeStartMeta () {
      this.startColumns = []
      let self = this
      if (self.config.other.dataSource.MetaPopSettings.startLevel && self.config.other.dataSource.MetaPopSettings.startLevel.table) {
        var item = this.metatables.find(v => {
          return v.metaname === self.config.other.dataSource.MetaPopSettings.startLevel.table
        })
        if (item) {
          this.startColumns = item.columns
        }
      }
    },
    addPopOrderBy () {
      this.config.other.dataSource.MetaPopSettings.orderList.push({
        column: '',
        direction: 'asc'
      })
    },
    addColumns () {
      this.config.other.dataSource.StaticSettings.data.push({
        uid: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 999999),
        code: '',
        text: '',
        disabled: false
      })
    },
    handleAddChildren (row, index) {
      if (!row.children) {
        this.$set(row, 'children', [])
        row.children = []
      }
      row.children.push({
        uid: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 999999),
        code: '',
        value: '',
        disabled: false
      })
    },
    handleRemove (row, index) {
      this.config.other.dataSource.StaticSettings.data.splice(index, 1)
    },
    handlePopOrderRemove (index) {
      this.config.other.dataSource.MetaPopSettings.orderList.splice(index, 1)
    }
  }
}
</script>
<style scoped>
.el-cascader-menu {
    max-height: 300px;
}
</style>
